<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师登录</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/element.css">
</head>
<body style="background:url('../../images/tp2.jpg') no-repeat; background-size: cover;">
    <div id="wrapper">
        <div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px">
            <div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">教师登录页面</div>
            <div style="margin-top: 25px; width: 100%; height: 320px;">
                <div style="width: 60%; margin: 0 auto">

                    <!--1-->
                    <input v-model="user.account" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%" placeholder="请输入账号">
                    <input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%; margin-top: 25px" placeholder="请输入密码">
                    <div style="margin-top: 25px; line-height: 40px">
                        <input v-model="user.code" type="text" style="border: 1px solid #ccc; padding: 10px; width: 65%; " placeholder="请输入验证码">
                        <div id="picyzm" style="display: inline-block; height: 35px; vertical-align: middle;"></div>
                    </div>

                    <button @click="login" style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">登录</button>
                    <a style="width: 100%; text-align: right; display: inline-block; margin-top: 50px; color: darkblue" href="/page/end/login.html">学生登录入口</a>
                </div>

            </div>
        </div>
    </div>

    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/element.js"></script>
    <script src="../../js/gVerify.js"></script>

    <script>
        //初始化验证码
        let  verifyCode;

        new Vue({
            el: "#wrapper",
            data: {
                user: {}
            },
            mounted() {
                verifyCode = new GVerify({
                    id: "picyzm",
                    type: "blend"
                });
            },
            methods: {
                login() {
                    if (!this.user.account) {
                        this.$message({
                            message: "请输入用户名",
                            type: "error"
                        });
                        return;
                    }
                    if (!this.user.password) {
                        this.$message({
                            message: "请输入密码",
                            type: "error"
                        });
                        return;
                    }
                    if (!this.user.code) {
                        this.$message({
                            message: "请输入验证码",
                            type: "error"
                        });
                        return;
                    }
                    let res = verifyCode.validate(this.user.code);
                    if (!res) {
                        this.$message({
                            message: "验证码错误",
                            type: "error"
                        });
                        return;
                    }
                    $.ajax({
                        url: "/api/user/teacherLogin",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(this.user)
                    }).then(res => {

                        console.log(res);
                        if (res.code === 0) {
                            this.$message({
                                message: "登录成功",
                                type: "success"
                            });
                            sessionStorage.setItem("user", JSON.stringify(res.data));
                            setTimeout(() => {
                                location.href= "/page/front/index.html"
                            }, 1000)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
                }
            }
        })

    </script>
</body>
</html>
